<template>
  <div class="ai-radio">
    <!-- 单选框组布局 -->
    <el-radio-group v-model="modelId" size="default" @change="changeModel">
      <el-radio-button v-for="(item, index) in modelLimitList" :value="item.id">
        <template #default>
          <!-- 布局单选框样式 -->
          <div class="my-label">
            <el-image :src="item.avatar"></el-image>
            <div>
              <a>{{ item.modelname }}</a>
            </div>
          </div>
        </template>
      </el-radio-button>
      <el-button :icon="AIMore" round @click="robotListVisiable = true"><a>更多</a></el-button>
    </el-radio-group>
  </div>
  <!-- 机器人选择列表 -->
  <RobotList :dialogVisible="robotListVisiable" @dialogClose="getClose" />
</template>

<script setup>
import { ref, onMounted } from "vue"
import AIMore from "@/components/icons/AIMore.vue";
import RobotList from "@/components/robots/RobotList.vue";
import { getModelListLimit } from "@/api/model";

const robotListVisiable = ref(false)
const modelLimitList = ref([])
const modelId = ref()
const emit = defineEmits(['choseModel'])

//获取前两个模型
onMounted(() => {
  getModelListLimit().then(res => {
    modelLimitList.value = res.data
    modelId.value = modelLimitList.value[0].id
    emit('choseModel', modelLimitList.value[0])
  })
})

const getClose = () => {
  robotListVisiable.value = false
}
const changeModel = (val) => {
  // console.log(val);
  // 找到对应id的模型对象并发出事件
  const selectedModel = modelLimitList.value.find(model => model.id === val)
  emit('choseModel', selectedModel)
}

</script>

<style lang="scss" scoped>
.el-radio-group {
  row-gap: 1rem;
  gap: 1rem;

}

.my-label {
  display: flex;
  align-items: center;
  row-gap: 0.5rem;
  gap: 0.5rem;

  .el-image {
    height: 1rem;
    width: 1rem;
  }
}

a {
  font-weight: bold;
}

// :deep(.el-radio-button__inner){
//   border: 1px solid #a5acac;
//   border-radius: 0.5rem;
// }</style>
